<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>轮播图管理</title>
    <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css">
    <script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        /*鼠标放上小手标志*/
        font {
            cursor: pointer;
        }

        button {
            cursor: pointer;
        }
    </style>
</head>
<body>

<script type="text/html" id="zizeng">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" onclick="addBanner()">添加轮播图</button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<!-- 操作指令 -->
<script type="text/html" id="barDemo">
    <a lay-event="edit">
        <font color="#0000FF">编辑</font>
    </a>
    <a>|</a>
    <a lay-event="del">
        <font color="red">删除</font>
    </a>
</script>


<script src="../static/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test',
            url: '/selIbtu',
            title: '用户数据表',
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'zizeng',
                    width: 220,
                    title: '序号',
                    templet: '#zizeng'
                }, {
                    field: 'bannerId',
                    title: 'ID',
                    hide: true
                }, {
                    field: 'bannerSort',
                    title: '排序',
                    width: 200
                }, {
                    field: 'bannerUrl',
                    title: '图片',
                    width: 305,
                    templet: function (object) {
                        return '<div style="text-align: center"><img src="' + object.bannerUrl + '" style=" max-width:300px;height: auto" >';
                    }
                }, {
                    field: 'bannerPath',
                    title: '链接地址',
                    width: 260
                }, {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 250
                }]
            ],
            page: true,
            height: 515,
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') { //删除
                var flag = confirm("您确定要删除吗？");
                if (flag) {
                    $.ajax({
                        type: "post",
                        url: '/delBanners',
                        dataType: "json",
                        data: {
                            id: data.bannerId
                        },
                        success: function (data) {
                            if (data.code == 0) {
                                layer.msg("删除成功", {
                                    icon: 6
                                }, function () {
                                    location.reload()
                                });
                            } else {
                                layer.alert("删除失败")
                            }
                        }
                    })
                }
            } else if (obj.event === 'edit') { //编辑按钮
                // window.location.href = "/addlbtu?id="+data.bannerId;
                $("#boxDiv").css("display", "block");
                var box = document.getElementById("tupian");
                $("#bannerId").val(data.bannerId);
                box.innerHTML = box.innerHTML + '<img class="layui-upload-img" src="' + data.bannerUrl + '" id="demo1" width="100px" height="100px" style="margin-left: 110px">';
                $("#bannerPath").val(data.bannerPath);
                $("#bannerSort").val(data.bannerSort);
            }
        });
    });
</script>
<script>
    //提交
    function sub() {
        let bannerId = document.getElementById("bannerId").value;
        let bannerPath = document.getElementById("bannerPath").value;
        let bannerSort = document.getElementById("bannerSort").value;
        var flag = confirm("您确定要修改吗？");
        if (flag) {
            $.ajax({
                url: '/updIbtu',
                type: 'post',
                dataType: 'json',
                async: false,
                data: {
                    bannerId: bannerId,
                    bannerPath: bannerPath,
                    bannerSort: bannerSort
                },
                success: function (data) {
                    if (data == 200) {
                        alert("修改信息成功")
                        window.location.href = "/lbtu"
                    } else {
                        alert("修改信息失败")
                    }
                },
                error: function () {
                    layer.alert("修改失败", {
                        icon: 7,
                        title: '提示',
                        time: 1000
                    })
                }
            })
        }
    }

    //添加
    function addBanner() {
        window.location.href = "/addlbtu";
    }

    //返回
    function fh() {
        $("#boxDiv").css("display", "none");
    }
</script>
<div style="width: 500px;background-color: whitesmoke; height: 400px; display: none;position: fixed;top:15%; left: 30%"
     id="boxDiv">
    <form class="layui-form" action="" onsubmit="return false">
        <div class="layui-form-item">
            <!--            <label class="layui-form-label">链接地址:</label>-->
            <div class="layui-input-inline">
                <input type="hidden" name="bannerId" id="bannerId" lay-verify="required" placeholder="请输入外部链接"
                       autocomplete="off" class="layui-input" maxlength="20">
            </div>
        </div>
        <div class="layui-upload">
            <div class="layui-upload-list" id="tupian">
                <p id="demoText"></p>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接地址:</label>
            <div class="layui-input-inline">
                <input type="text" name="bannerPath" id="bannerPath" lay-verify="required" placeholder="请输入外部链接"
                       autocomplete="off" class="layui-input" maxlength="20">
            </div>
            <span id="nameSpan"></span>
        </div>

        <!--排序-->
        <div class="layui-form-item">
            <label class="layui-form-label">排序:</label>
            <div class="layui-input-inline">
                <input type="number" name="bannerSort" id="bannerSort" lay-verify="required" placeholder="请输入依次顺序"
                       autocomplete="off" class="layui-input" maxlength="3">
            </div>
            <span id="ageSpan"></span>
        </div>
        <button class="layui-btn layui-btn-primary layui-border-orange" id="button" onclick="sub()"
                style="margin-left: 110px">提交
        </button>
        <button class="layui-btn layui-btn-primary layui-border-red" id="button1" onclick="fh()">返回</button>
    </form>
</div>
</body>
</html>
